<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>jquery</title>
  <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  <link rel="stylesheet" href="libs/animate.css">
  <link rel="stylesheet" href="libs/bootstrap/css/bootstrap.css">
  <link rel="stylesheet" href="libs/jqueryMusic/css/css.css">
  <link rel="stylesheet" href="css/index.css">
</head>
<body>



<!--<audio class="mp3" src="" controls></audio>-->
<div class="container-sm">
  <div class="row padding-10 search-area">
    <div class="input-group input-group-lg">
      <input type="text"
             class="form-control border border-info keywords"
             placeholder="请输入关键字搜索"
             aria-label="Recipient's username"
             aria-describedby="button-addon2"
      >
      <div class="input-group-append">
        <button class="submit-song-keywords btn btn-outline-secondary border border-info bg-info text-danger" type="button" id="button-addon2">
          <svg class="bi" width="1em" height="1em" fill="currentColor">
            <use xlink:href="libs/bootstrap-icons/bootstrap-icons.svg#search"/>
          </svg>
        </button>
      </div>
    </div>
  </div>
  <div class="row padding-10">
    <ul class="list-group w-100 song-list">
      <!--  <li class="list-group-item">Dapibus ac facilisis in</li>
        <li class="list-group-item list-group-item-primary">A simple primary list group item</li>
        <li class="list-group-item list-group-item-secondary">A simple secondary list group item</li>
        <li class="list-group-item list-group-item-success">A simple success list group item</li>
        <li class="list-group-item list-group-item-danger">A simple danger list group item</li>
        <li class="list-group-item list-group-item-warning">A simple warning list group item</li>
        <li class="list-group-item list-group-item-info">A simple info list group item</li>
        <li class="list-group-item list-group-item-light">A simple light list group item</li>
        <li class="list-group-item list-group-item-dark">A simple dark list group item</li>
        -->
      </ul>
    <div class="empty w-100">暂无数据</div>
  </div>
<!--  <li data-id="">asd</li>-->
</div>

<div class="player">
  <div class="player__bar bg-info border border-info">
    <div class="player__album">
      <!--<div class="player__albumImg active-song"
           data-author="Khalid"
           data-song="Location"
           data-src="mp3.mp3"
           style="background-image: url(images/a1.png)"> </div>
      <div class="player__albumImg"
           data-author="Khalid"
           data-song="Angels"
           data-src="http://music.dawnfoxes.com/_fxs_/_upls_/_sngs_/USA/khalid-angels.mp3"
           style="background-image: url(images/a1.png)"> </div>-->
    </div>
    <div class="player__controls">
      <div class="player__prev">
        <svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
          <path d="M26.695 34.434v31.132L54.5 49.998z"/>
          <path d="M24.07 34.434v31.132c0 2.018 2.222 3.234 3.95 2.267l27.804-15.568c1.706-.955 1.707-3.578 0-4.533L28.02 32.168c-2.957-1.655-5.604 2.88-2.649 4.533l27.805 15.564v-4.533L25.371 63.3l3.95 2.267V34.435c-.001-3.387-5.251-3.387-5.251-.001z"/>
          <g>
            <path d="M55.5 34.434v31.132l27.805-15.568z"/>
            <path d="M52.875 34.434v31.132c0 2.018 2.222 3.234 3.949 2.267 9.27-5.189 18.537-10.379 27.805-15.568 1.705-.955 1.705-3.578 0-4.533L56.824 32.168c-2.957-1.655-5.604 2.88-2.648 4.533l27.803 15.564v-4.533L54.176 63.3l3.949 2.267V34.435c0-3.387-5.25-3.387-5.25-.001z"/>
          </g>
        </svg>
      </div>
      <div class="player__play">
        <svg class="icon play" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64">
          <path d="M51.109 30.335l-36-24A2 2 0 0 0 12 8v48a2.003 2.003 0 0 0 2 2c.388 0 .775-.113 1.109-.336l36-24a2 2 0 0 0 0-3.329z"/>
        </svg>
        <svg class="icon pause" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
          <path d="M22.537 8.046h17.791c1.104 0 2.003.898 2.003 1.993v79.912a2.005 2.005 0 0 1-2.003 2.003h-17.79a2.005 2.005 0 0 1-2.003-2.003V10.04c0-1.095.898-1.993 2.002-1.993zM59.672 8.046h17.8c1.095 0 1.993.898 1.993 1.993v79.912a2.003 2.003 0 0 1-1.993 2.003h-17.8a1.997 1.997 0 0 1-1.993-2.003V10.04c0-1.095.889-1.993 1.993-1.993z"/>
        </svg>
      </div>
      <div class="player__next">
        <svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
          <path d="M26.695 34.434v31.132L54.5 49.998z"/>
          <path d="M24.07 34.434v31.132c0 2.018 2.222 3.234 3.95 2.267l27.804-15.568c1.706-.955 1.707-3.578 0-4.533L28.02 32.168c-2.957-1.655-5.604 2.88-2.649 4.533l27.805 15.564v-4.533L25.371 63.3l3.95 2.267V34.435c-.001-3.387-5.251-3.387-5.251-.001z"/>
          <g>
            <path d="M55.5 34.434v31.132l27.805-15.568z"/>
            <path d="M52.875 34.434v31.132c0 2.018 2.222 3.234 3.949 2.267 9.27-5.189 18.537-10.379 27.805-15.568 1.705-.955 1.705-3.578 0-4.533L56.824 32.168c-2.957-1.655-5.604 2.88-2.648 4.533l27.803 15.564v-4.533L54.176 63.3l3.949 2.267V34.435c0-3.387-5.25-3.387-5.25-.001z"/>
          </g>
        </svg>
      </div>
    </div>
  </div>
  <div class="player__timeline">
    <p class="player__author"></p>
    <p class="player__song"></p>
    <div class="player__timelineBar">
      <div id="playhead"></div>
    </div>
  </div>
</div>

<div class="loading">
  <!--<svg class="bi" width="60" height="60" fill="currentColor">
    <use xlink:href="libs/bootstrap-icons/bootstrap-icons.svg#broadcast"/>
  </svg>-->
  <div class="spinner-grow text-primary" role="status">
    <span class="sr-only">Loading...</span>
  </div>
  <div class="spinner-grow text-secondary" role="status">
    <span class="sr-only">Loading...</span>
  </div>
  <div class="spinner-grow text-success" role="status">
    <span class="sr-only">Loading...</span>
  </div>
  <div class="spinner-grow text-danger" role="status">
    <span class="sr-only">Loading...</span>
  </div>
  <div class="spinner-grow text-warning" role="status">
    <span class="sr-only">Loading...</span>
  </div>
  <div class="spinner-grow text-info" role="status">
    <span class="sr-only">Loading...</span>
  </div>
  <div class="spinner-grow text-light" role="status">
    <span class="sr-only">Loading...</span>
  </div>
  <div class="spinner-grow text-dark" role="status">
    <span class="sr-only">Loading...</span>
  </div>
</div>

<!--
搜索：http://musicapi.leanapp.cn/search?keywords=<word>
播放：https://music.163.com/song/media/outer/url?id=<id>.mp3
-->

<script src="./libs/jquery-3.5.1.js"></script>
<script src="./libs/bootstrap/js/bootstrap.bundle.js"></script>
<script src="libs/jqueryMusic/js/TweenMax.min.js"></script>
<script src="./javascript/index.js"></script>

</body>
</html>
